<template>
	<view class="basic_info">
		<editDataTop data="基本资料"></editDataTop>
		<!-- 会员编辑资料 -->
		<view class="fillin">
			<u-cell-group :border="false">
				<u-cell :title="item.title" v-for="item in CellInfo" :key="item.title">
					<template #value >
						<view :style="{'width': item.placeholder?'150rpx':'80rpx'}">
							<u--input :placeholder="item.placeholder?item.placeholder:'不限'" border="none" v-model="item.value"></u--input>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
		<!-- 才艺编辑 -->
		<view class="fillin">
			<view class="talent_title">才艺/兴趣</view>
			<u-cell-group :border="false">
				<u-cell :title="item.title" v-for="item in CellTalent" :key="item.title" @click="editItem(item)">
					<template #value>
						<u--image :showLoading="true" src="/static/imgs/bjzl.png" width="30px" height="30px"></u--image>
					</template>
				</u-cell>
			</u-cell-group>
			<u-modal :title="ModalData.title" :zoom="false" closeOnClickOverlay :show="ShowModal"
			 showCancelButton @cancel="ShowModal=false"  @confirm="confirmModal">
				<template>
					<u--textarea :placeholder="'请输入'+ModalData.title" border="none" v-model="ModalData.value" style="width: 100%;"></u--textarea>
				</template>
			 </u-modal>
		</view>
		<!-- 内心独白 -->
		<view class="fillin" style="display: flex;">
			<view style="padding: 10rpx;">内心独白:</view>
			<u--textarea border="none" v-model="cellData.info" style="width: 70%;"></u--textarea>
		</view>
		<!-- 点击保存 -->
		<view class="fillin">
			<u-button @click="preserve" customStyle="width:150rpx;height:25px;borderRadius: 5px;" text="保存" color="#1afa29"></u-button>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { base_infoReq, base_info_saveReq } from "../../api/user";
	//用户资料
	const cellData=ref({})
	// cell列表
	const CellInfo=reactive([
		{title:'昵称',value:'',name:'nickname',placeholder:'请输入昵称'},
		{title:'性别',value:'',name:'sex',placeholder:'请输入性别'},
		{title:'婚姻状况',value:'',name:'marital'},
		{title:'学历',value:'',name:'education'},
		{title:'身高',value:'',name:'height'},
		{title:'体重',value:'',name:'weight'},
		{title:'籍贯',value:'',name:'native_place'},
		{title:'职业',value:'',name:'profession'},
		{title:'薪酬',value:'',name:'salary'},
		{title:'住房情况',value:'',name:'house'},
		{title:'购车情况',value:'',name:'car'},
		{title:'个人资产',value:'',name:'asset'},
		{title:'现居地址',value:'',name:'cur_city'},
		{title:'属相',value:'',name:'zodiac'},
		{title:'户口',value:'',name:'reg_address'},
		{title:'是否吸烟',value:'',name:'smoke'},
		{title:'是否饮酒',value:'',name:'drink'},
	])
	// ecll才艺兴趣列表
	const CellTalent=reactive([
		{title:'擅长才艺',value:'',name:'art'},
		{title:'休闲娱乐',value:'',name:'amusement'},
		{title:'喜欢的书籍',value:'',name:'book'},
		{title:'欣赏的名人',value:'',name:'celebrity'},
		{title:'喜爱的音乐',value:'',name:'music'},
		{title:'喜爱的美食',value:'',name:'food'},
	])
	// 模态框是否显示
	const ShowModal=ref(false)
	// 模态框内容
	const ModalData=ref({})
	// 点击编辑才艺
	const editItem=(item)=>{
		ShowModal.value=true
		ModalData.value=item
	}
	// 点击模态框确认
	const confirmModal=()=>{
		ShowModal.value=false
		CellTalent.forEach(item=>{
			if(item.name==item.name){
				item.value=item.value
			}
		})
	}
	// 请求会员基本资料
	onMounted(async()=>{
		let res=await base_infoReq()
		cellData.value=res.data.data
		for(let key in cellData.value){
			CellInfo.forEach(item=>{
				if(item.name==key){
					item.value=cellData.value[key]
				}	
			})
			CellTalent.forEach(item=>{
				if(item.name==key){
					item.value=cellData.value[key]
				}	
			})
		}
	})
	// 点击了保存
	const preserve=async()=>{
		// 组装数据
		let reqObj={}
		CellInfo.forEach(item=>{
			reqObj[item.name]=item.value
		})
		CellTalent.forEach(item=>{
			reqObj[item.name]=item.value
		})
		let res=await base_info_saveReq({...reqObj,info:cellData.value.info})
		if(res.data.code==0){
			uni.showToast({
				title: '保存成功',
				icon:"success"
			});
		}else{
			uni.showToast({
				title: '保存失败',
				icon:"success"
			});
		}
	}
</script>

<style lang="scss">
.basic_info{
	background: #f3f5f6;
	overflow-y: scroll;
	.fillin {
		position: relative;
		top: -100rpx;
		width: calc(100% - 100rpx);
		margin: 30rpx;
		background: #fff;
		padding: 20rpx;
		.text{
			color: #ccc;
		}
		.talent_title{
			color: #5e2ccd;
			font-weight: bold;
			border-left: 3px solid #1296da;
			padding-left: 20rpx;
		}
	}
}
</style>
